<script setup lang="js">
import { defineProps, onMounted, ref } from 'vue'
import { addCart } from '@/api/cartAPI.js'
import bwPowerSet from '@/utils/power-set.js'
import { ElMessage } from 'element-plus'
import { cart } from '@/stores/cart.js'
const cartStore = cart()
const count = ref(0)
let skuValue = {}
const sel = (item, ele) => {
  if (item.selected) {
    item.selected = false
  } else {
    ele.values.forEach((ele) => {
      ele.selected = false
    })
    item.selected = true
  }
  updataSku(goods.detail.specs, pathMap)
  //产出sku单元
  const orderArr = getOrderArr(goods.detail.specs)
  if (orderArr.findIndex((ele) => ele === undefined) > -1) {
    skuValue = {}
  } else {
    const key = orderArr.join('-')
    skuValue = goods.detail.skus.find((sku) => +sku.id === +pathMap[key])
  }
  console.log(skuValue)
}
const goods = defineProps({
  detail: {
    type: Object
  }
})
let pathMap = {}
onMounted(() => {
  pathMap = getPathMap(goods.detail.skus)
  init(goods.detail.specs, pathMap)
})
//获取路径字典
const getPathMap = (skus) => {
  const pathMap = []
  const actskus = skus.filter((sku) => sku.inventory > 0)
  actskus.forEach((actsku) => {
    bwPowerSet(actsku.specs.map((spec) => spec.valueName))
      .filter((ele) => ele.length)
      .forEach((ele) => {
        ele = ele.join('-')
        if (pathMap[ele]) {
          pathMap[ele].push(actsku.id)
        } else {
          pathMap[ele] = [actsku.id]
        }
      })
  })
  return pathMap
}
//初始化sku
const init = (specs, pathMap) => {
  specs.forEach((spec) => {
    spec.values.forEach((val) => {
      if (pathMap[val.name]) {
        val.disable = false
      } else {
        val.disable = true
      }
    })
  })
}
//获得规格数组
const getOrderArr = (specs) => {
  const orderArr = []
  specs.forEach((spec) => {
    const selVal = spec.values.find((val) => val.selected)
    orderArr.push(selVal ? selVal.name : undefined)
  })
  return orderArr
}
//选中切换sku状态
const updataSku = (specs, pathMap) => {
  const orderArr = getOrderArr(specs)
  specs.forEach((spec, index) => {
    spec.values.forEach((val) => {
      orderArr[index] = val.name
      const key = orderArr.filter((ele) => ele).join('-')
      if (pathMap[key]) {
        val.disable = false
      } else {
        val.disable = true
      }
    })
  })
}
//点击事件
const onclick = async () => {
  if (count.value === 0) {
    ElMessage.error('商品数量不能为0')
    return
  } else if (skuValue.id) {
    const res = await addCart({ skuId: skuValue.id, count: count.value })
    console.log(res)
    ElMessage.success('添加成功')
    cartStore.getcartdata()
  } else {
    ElMessage.error('选择完整')
  }
}
</script>
<template>
  <div class="detail">
    <h2>{{ goods.detail.name }}</h2>
    <p>{{ goods.detail.desc }}</p>
    <p>￥{{ goods.detail.price }}</p>
    <div class="sku">
      <ul>
        <li v-for="ele in goods.detail.specs" :key="ele.id">
          <h4>{{ ele.name }}</h4>
          <div
            v-for="item in ele.values"
            :key="item.name"
            class="uks"
            @click="sel(item, ele)"
            :class="{ activepic1: item.selected, disable: item.disable }"
          >
            <img v-if="item.picture" :src="item.picture" width="40px" alt="" />
            <span v-else>{{ item.name }}</span>
          </div>
        </li>
      </ul>
    </div>
    <el-input-number v-model="count" :min="0" />
    <el-button type="primary" color="#1dc779" @click="onclick"
      >添加购物车</el-button
    >
  </div>
</template>
<style lang="scss" scoped>
.sku {
  width: 300px;
  height: 200px;

  margin: 30px 0;
}
.activepic {
  border: 1px solid $xtxColor;
}
.uks {
  margin: 10px 10px;
  padding: 5px;
  display: inline-block;
  border: 1px solid #999;
  cursor: pointer;
  //鼠标悬停
}
.activepic1 {
  border: 1px solid $xtxColor;
}
.disable {
  background-color: red;
  cursor: not-allowed;
  border: 1px solid red;
}
</style>
